<template>
	<view class="o2o-container">

		<!-- 自定义导航栏 - 仿首页样式 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content" :style="{ height: navBarHeight + 'px' }">
				<view class="location-btn" @click="selectLocation">
					<u-icon name="map" size="14" color="#fff"></u-icon>
					<text class="location-text">{{ currentLocation }}</text>
					<u-icon name="arrow-down" size="12" color="#fff"></u-icon>
				</view>
				<view class="search-box" @click="goSearch">
					<u-icon name="search" size="16" color="#999"></u-icon>
					<text class="search-text">搜索商家、商品</text>
				</view>
				<view class="nav-right">
					<view class="scan-btn" @click="scanQRCode">
						<u-icon name="scan" size="22" color="#fff"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 下拉刷新容器 -->
		<scroll-view class="scroll-container" scroll-y refresher-enabled :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
			<!-- 轮播图区域 -->
			<view class="banner-section" v-if="bannerList.length > 0">
				<swiper class="swiper-container" autoplay circular indicator-dots>
					<swiper-item v-for="(banner, index) in bannerList" :key="index">
						<image :src="banner.image" class="banner-image" @click="onBannerClick(banner)"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 服务分类 -->
			<view class="life clear">
				<view v-for="(category, index) in serviceCategories" :key="index" @click="selectCategory(category)"
					class="category-item">
					<image :src="category.image" class="category-image"></image>
					<text class="category-name">{{ category.name }}</text>
				</view>
			</view>

			<!-- 为你推荐 -->
			<view class="goods_list">
				<view class="sjtitle">为你推荐</view>
			</view>

			<!-- 商家列表 -->
			<view class="merchant-container">
				<view v-if="merchantList.length === 0 && !loading" class="empty-state">
					<text class="empty-text">暂无商家数据</text>
				</view>

				<view v-for="merchant in merchantList" :key="merchant.store.store_id" class="big-box">
					<view class="shangjia-box">
						<!-- 商家信息 -->
						<view class="shangjia clear" @click="viewMerchant(merchant.store.store_id)">
							<view class="fl sjwh">
								<image :src="getImageUrl(merchant.store.logo_image)" class="merchant-logo"></image>
							</view>
							<view class="fl ml2 merchant-info">
								<view class="clear title">
									<text class="f32 fl  mr6 shangjia-title">{{ merchant.store.store_name }}</text>
								</view>
								<view class="clear mt15 title">
									<view class="star fl clear mr1" :data-score="merchant.store.eval_score">
										<text v-for="i in 5" :key="i" class="star-item"
											:class="{ filled: i <= merchant.store.eval_score }">★</text>
									</view>
								</view>
								<view class="clear mt15 title">
									<text class="fl pr area">{{ merchant.store.address }}</text>
								</view>
							</view>
						</view>

						<!-- 商品列表 -->
						<view v-for="goods in merchant.goods_list" :key="goods.group_id" class="shangjia-goods clear"
							@click="viewGoods(goods.group_id, goods.store_id)">
							<view class="clear small-box">
								<view class="fl goods-name">{{ goods.title }}{{ goods.need_resv == 1 ? '（需电话预约）' : '' }}
								</view>
								<view class="fr yishou">已售<text>{{ goods.sold_num }}</text></view>
							</view>
							<view class="clear small-box fenrun">
								<view class="fl goods-price">￥{{ goods.price }}</view>
								<view class="fl goods-fenru">分润<text>￥{{ goods.rebate_price }}</text></view>
							</view>
						</view>

						<!-- 查看更多 -->
						<view v-if="merchant.goods_list.length >= 2" class="look-more"
							@click="viewMoreGoods(merchant.store.store_id)">
							<text>查看更多优惠项目</text>
							<image src="/static/img/o2o/youjiantou@2x.png" class="arrow-icon"></image>
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view v-if="loading" class="loading-more">
					<text>加载中...</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部导航 -->
		<!-- 动态底部菜单 -->
		<dynamic-tabbar :current-page="'life'"></dynamic-tabbar>

	</view>
</template>

<script>
import api from '../../api/index.js'
import DynamicTabbar from '../../components/dynamic-tabbar.vue'
import wzLocation from '../../utils/wz_location.js'

export default {
	components: {
		DynamicTabbar
	},
	data() {
		return {
			// 小程序适配相关

			hasNewMessage: false,
			currentLocation: '北京市朝阳区',
			// 系统信息
			statusBarHeight: 0,
			navBarHeight: 44,

			// 页面数据
			currentAddress: '定位中...',
			latitude: null,
			longitude: null,
			cityName: '',

			// 轮播图
			bannerList: [],

			// 服务分类
			serviceCategories: [],

			// 商家列表
			merchantList: [],
			loading: false,
			refreshing: false,

			// API配置
			baseUrl: 'https://api.youpin91.com'
		}
	},

	onLoad() {
		this.initPage()
	},

	onShow() {
		// 页面显示时检查位置信息
		this.checkLocation()
	},

	methods: {
		// 初始化页面
		async initPage() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 0

			// 获取位置信息
			await this.getLocation()

			// 加载页面数据
			await Promise.all([
				this.loadCategories(),
				this.loadMerchants()
			])
		},

		// 获取地理位置
		async getLocation() {
			// 先检查缓存
			const cachedLat = uni.getStorageSync('lat')
			const cachedLng = uni.getStorageSync('lng')
			const cachedAddr = uni.getStorageSync('addr')
			const cachedCity = uni.getStorageSync('city')

			if (cachedLat && cachedLng && cachedAddr) {
				this.latitude = cachedLat
				this.longitude = cachedLng
				this.currentAddress = cachedAddr
				this.currentLocation = cachedAddr
				this.cityName = cachedCity
				return
			}

			try {
			console.log('[O2O_PAGE] 开始获取位置信息')
			// 显示定位中状态
			this.currentLocation = '定位中...'
			
			// 使用维智物联定位工具获取当前位置
			console.log('[O2O_PAGE] 调用wzLocation.getCurrentLocation()')
			const locationInfo = await wzLocation.getCurrentLocation()
			
			console.log('[O2O_PAGE] 获取到的位置信息:', locationInfo)
			
			// 检查位置信息是否有效
			if (!locationInfo || !locationInfo.latitude || !locationInfo.longitude) {
				console.error('[O2O_PAGE] 位置信息无效:', locationInfo)
				throw new Error('位置信息无效')
			}
			
			this.latitude = locationInfo.latitude
			this.longitude = locationInfo.longitude
			this.currentAddress = locationInfo.name || locationInfo.address
			this.currentLocation = locationInfo.name || locationInfo.address
			this.cityName = locationInfo.city

			console.log('[O2O_PAGE] 页面位置信息已更新:', {
				latitude: this.latitude,
				longitude: this.longitude,
				currentAddress: this.currentAddress,
				cityName: this.cityName,
				isDefault: locationInfo.isDefault
			})

			// 缓存位置信息
			console.log('[O2O_PAGE] 缓存位置信息到本地存储')
			uni.setStorageSync('lat', locationInfo.latitude)
			uni.setStorageSync('lng', locationInfo.longitude)
			uni.setStorageSync('addr', locationInfo.address)
			uni.setStorageSync('city', locationInfo.city)

			// 如果是默认位置，提示用户
			if (locationInfo.isDefault) {
				console.warn('[O2O_PAGE] 使用了默认位置，原因:', locationInfo.errorMsg)
				uni.showToast({
					title: locationInfo.errorMsg || '定位失败，使用默认位置',
					icon: 'none',
					duration: 3000
				})
			}

			// 调用为你推荐接口
			console.log('[O2O_PAGE] 开始加载推荐数据')
			await this.loadRecommendations()

		} catch (error) {
			console.error('[O2O_PAGE] 获取位置失败:', {
				message: error.message,
				errMsg: error.errMsg,
				error: error
			})
			
			// 提示用户授权位置信息
			if (error.errMsg && error.errMsg.includes('auth deny')) {
				console.log('[O2O_PAGE] 权限被拒绝，显示权限引导弹窗')
				uni.showModal({
					title: '位置权限',
					content: '需要获取您的位置信息来为您推荐附近的商家，请在设置中开启位置权限',
					confirmText: '去设置',
					success: (res) => {
						if (res.confirm) {
							console.log('[O2O_PAGE] 用户选择去设置页面')
							uni.openSetting()
						} else {
							console.log('[O2O_PAGE] 用户取消去设置页面')
						}
					}
				})
			}
			
			// 使用默认位置（北京）
			console.log('[O2O_PAGE] 使用默认位置（北京）')
			this.latitude = 39.9042
			this.longitude = 116.4074
			this.currentAddress = '北京市朝阳区'
			this.currentLocation = '北京市朝阳区'
			this.cityName = '北京市'
			
			// 缓存默认位置
			uni.setStorageSync('lat', this.latitude)
			uni.setStorageSync('lng', this.longitude)
			uni.setStorageSync('addr', this.currentAddress)
			uni.setStorageSync('city', this.cityName)
		}
		},



		// 检查位置信息
		checkLocation() {
			const lat = uni.getStorageSync('lat')
			if (lat) {
				this.latitude = lat
				this.longitude = uni.getStorageSync('lng')
				this.currentAddress = uni.getStorageSync('addr')
				this.currentLocation = uni.getStorageSync('location_name') || uni.getStorageSync('addr')
				this.cityName = uni.getStorageSync('city')
			}
		},

		// 选择位置
		async selectLocation() {
			try {
				// 使用维智物联定位工具选择位置
				const locationInfo = await wzLocation.chooseLocation()
				
				console.log('选择的位置:', locationInfo)
				
				this.currentAddress = locationInfo.address
				this.currentLocation = locationInfo.name || locationInfo.address
				this.latitude = locationInfo.latitude
				this.longitude = locationInfo.longitude
				this.cityName = locationInfo.city

				// 更新缓存
				uni.setStorageSync('lat', locationInfo.latitude)
				uni.setStorageSync('lng', locationInfo.longitude)
				uni.setStorageSync('addr', locationInfo.address)
				uni.setStorageSync('city', locationInfo.city)
				uni.setStorageSync('location_name', locationInfo.name || locationInfo.address)

				// 重新加载数据
				this.loadMerchants()
				this.loadRecommendations()
			} catch (error) {
				console.error('选择位置失败:', error)
				uni.showToast({
					title: '选择位置失败',
					icon: 'none'
				})
			}
		},

		// 跳转搜索页面
		goSearch() {
			uni.navigateTo({
				url: '/pages/o2o/history-search'
			})
		},

		// 跳转消息页面
		goMessage() {
			uni.navigateTo({
				url: '/pages/news/list'
			})
		},

		// 扫码功能
		scanQRCode() {
			// #ifdef MP-WEIXIN
			// 微信小程序扫码
			uni.scanCode({
				success: (res) => {
					console.log('扫码结果:', res.result)
					// 处理扫码结果
					this.handleScanResult(res.result)
				},
				fail: (error) => {
					console.error('扫码失败:', error)
				}
			})
			// #endif

			// #ifndef MP-WEIXIN
			uni.showToast({
				title: '扫码功能仅在微信小程序中可用',
				icon: 'none'
			})
			// #endif
		},

		// 处理扫码结果
		handleScanResult(result) {
			// 解析二维码内容
			if (result.includes('code=')) {
				const code = result.slice(result.indexOf('code=') + 5, result.indexOf('code=') + 11)
				console.log('提取的验证码:', code)
				// 这里可以处理验证码逻辑
			}
		},

		// 加载服务分类
		async loadCategories() {
			try {
				const res = await api.o2oApi.getTopCateList()

				if (res.r === 0 && res.data && res.data.list) {
					this.serviceCategories = res.data.list.map(category => ({
						id: category.id,
						name: category.name,
						image: this.getImageUrl(category.file_path)
					}))

					// 添加亲子分类（固定）
					this.serviceCategories.push({
						id: 38,
						name: '亲子',
						image: 'https://weixin.youpin91.com.cn/img/o2o/qingzi@2x.png'
					})

					// 添加全部分类
					this.serviceCategories.push({
						id: 'all',
						name: '全部分类',
						image: 'https://weixin.youpin91.com.cn/img/o2o/qbfl@2x.png'
					})
				}
			} catch (error) {
				console.error('加载分类失败:', error)
				// 使用默认分类
				this.serviceCategories = [
					{ id: 38, name: '亲子', image: 'https://weixin.youpin91.com.cn/img/o2o/qingzi@2x.png' },
					{ id: 'all', name: '全部分类', image: 'https://weixin.youpin91.com.cn/img/o2o/qbfl@2x.png' }
				]
			}
		},

		// 加载商家列表
		async loadMerchants() {
			if (this.loading || !this.latitude) return

			this.loading = true

			try {
				const res = await api.o2oApi.forYouPush({
					latitude: this.latitude,
					longitude: this.longitude,
					city_name: this.cityName
				})

				if (res.r === 0 && res.data && res.data.list) {
					this.merchantList = res.data.list
				} else {
					console.error('加载商家失败:', res.msg)
				}
			} catch (error) {
				console.error('加载商家失败:', error)
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 加载推荐数据（对应原来的为你推荐功能）
		async loadRecommendations() {
			if (!this.latitude || !this.longitude) return
			
			try {
				console.log('调用为你推荐接口:', {
					latitude: this.latitude,
					longitude: this.longitude,
					city_name: this.cityName
				})
				
				const res = await api.o2oApi.forYouPush({
					latitude: this.latitude,
					longitude: this.longitude,
					city_name: this.cityName
				})

				if (res.r === 0 && res.data) {
					console.log('为你推荐数据:', res.data)
					// 这里可以处理推荐数据，比如更新商家列表
					if (res.data.list) {
						this.merchantList = res.data.list
					}
				} else {
					console.error('获取推荐数据失败:', res.msg)
				}
			} catch (error) {
				console.error('获取推荐数据失败:', error)
			}
		},

		// 下拉刷新
		async onRefresh() {
			this.refreshing = true

			try {
				await Promise.all([
					this.loadCategories(),
					this.loadMerchants()
				])
			} finally {
				this.refreshing = false
			}
		},

		// 上拉加载更多
		onLoadMore() {
			// 这里可以实现分页加载
			console.log('加载更多')
		},

		// 选择分类
		selectCategory(category) {
			if (category.id === 'all') {
				// 跳转到全部分类页面
				uni.navigateTo({
					url: '/pages/o2o/group/fenlei'
				})
			} else if (category.id === 38) {
				// 亲子分类
				uni.navigateTo({
					url: `/pages/o2o/shenghuofw?cate_id=${category.id}`
				})
			} else {
				// 其他分类
				uni.navigateTo({
					url: `/pages/o2o/shenghuofw?cate_id=${category.id}`
				})
			}
		},

		// 查看商家详情
		viewMerchant(storeId) {
			uni.navigateTo({
				url: `/pages/o2o/shangjia?id=${storeId}`
			})
		},

		// 查看商品详情
		viewGoods(groupId, storeId) {
			uni.navigateTo({
				url: `/pages/o2o/tg-shangpin-xq?group_id=${groupId}&store_id=${storeId}`
			})
		},

		// 查看更多商品
		viewMoreGoods(storeId) {
			uni.navigateTo({
				url: `/pages/o2o/shangjia?id=${storeId}`
			})
		},

		// 轮播图点击
		onBannerClick(banner) {
			if (banner.url) {
				uni.navigateTo({
					url: banner.url
				})
			}
		},

		// 获取完整图片URL
		getImageUrl(path) {
			if (!path) return '/static/img/default.png'
			if (path.startsWith('http')) return path
			return `${this.baseUrl}/${path}`
		},

		// 搜索附近POI
		async searchNearbyPOI(keyword, radius = 5000) {
			try {
				if (!this.latitude || !this.longitude) {
					uni.showToast({
						title: '请先获取位置信息',
						icon: 'none'
					})
					return []
				}

				const poiList = await wzLocation.searchPOI(keyword, {
					latitude: this.latitude,
					longitude: this.longitude
				}, radius)

				console.log('搜索到的POI:', poiList)
				return poiList
			} catch (error) {
				console.error('搜索POI失败:', error)
				return []
			}
		},

		// 计算商家距离
		calculateDistanceToMerchant(merchantLat, merchantLng) {
			if (!this.latitude || !this.longitude || !merchantLat || !merchantLng) {
				return '距离未知'
			}

			const distance = wzLocation.calculateDistance(
				{ latitude: this.latitude, longitude: this.longitude },
				{ latitude: merchantLat, longitude: merchantLng }
			)

			return wzLocation.formatDistance(distance)
		},

		// 逆地理编码获取地址
		async getAddressByCoordinates(lat, lng) {
			try {
				const addressInfo = await wzLocation.reverseGeocode(lat, lng)
				return addressInfo
			} catch (error) {
				console.error('逆地理编码失败:', error)
				return null
			}
		},

		// 地理编码获取坐标
		async getCoordinatesByAddress(address) {
			try {
				const coordinates = await wzLocation.geocode(address)
				return coordinates
			} catch (error) {
				console.error('地理编码失败:', error)
				return null
			}
		}
	}
}
</script>

<style scoped>
/* 基础样式 */
.o2o-container {
	background: #eee;
	min-height: 100vh;
}

.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: linear-gradient(135deg, #FF8033 0%, #FF6B35 100%);
	box-shadow: 0 4rpx 24rpx rgba(255, 128, 51, 0.15);
}

.navbar-content {
	display: flex;
	align-items: center;
	padding: 0 30rpx 0 20rpx;
}

.location-btn {
	display: flex;
	align-items: center;
	padding: 12rpx 20rpx;
	border-radius: 36rpx;
	background: rgba(255, 255, 255, 0.25);
	margin-right: 20rpx;
	backdrop-filter: blur(20rpx);
	transition: all 0.3s ease;
}

.location-btn:active {
	background: rgba(255, 255, 255, 0.35);
	transform: scale(0.98);
}

.location-text {
	margin: 0 6rpx;
	color: #fff;
	font-size: 24rpx;
	font-weight: 500;
	max-width: 80rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-box {
	flex: 1;
	height: 56rpx;
	max-width: 220rpx;
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	padding: 0 16rpx;
	backdrop-filter: blur(20rpx);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.search-box:active {
	background-color: rgba(255, 255, 255, 1);
	transform: scale(0.99);
}

.search-text {
	color: #999;
	font-size: 24rpx;
	margin-left: 8rpx;
}

.nav-right {
	display: flex;
	align-items: center;
	margin-left: 8rpx;
}

.scan-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8rpx;
}

/* 头部导航 */
.header {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 88rpx;
	background: #ff1e00;
	display: flex;
	align-items: flex-end;
	padding-bottom: 20rpx;
}

.h_first,
.h_second,
.h_thred {
	font-size: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.h_first {
	/* width: 120rpx; */
	height: 100%;
}

.h_second {
	flex: 1;
	height: 100%;
}

.h_thred {
	/* width: 240rpx; */
	height: 100%;
	flex-direction: column;
}

.location-info {
	display: flex;
	align-items: center;
	padding: 12rpx 24rpx;
	border-radius: 36rpx;
	background: rgba(255, 255, 255, 0.2);
}

.location-icon {
	width: 28rpx;
	height: 28rpx;
	margin-right: 8rpx;
}

.address-text {
	/* width: 240rpx; */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 22rpx;
	color: #fff;
	text-align: center;
	margin-left: 30rpx;
}

.search {
	position: relative;
	left: 40rpx;
	bottom: -26rpx;
	/* width: 948rpx; */
	height: 62rpx;
	border: 2rpx solid white;
	border-radius: 40rpx;
	overflow: hidden;
	background: #ffffff;
	display: flex;
	align-items: center;
	padding: 0 32rpx;
}

.search input {
	border: 0;
	background-color: rgba(0, 0, 0, 0);
	height: 62rpx;
	line-height: 62rpx;
	padding-left: 320rpx;
	font-size: 60rpx;
	position: absolute;
	color: #a2a2a2;
	width: 100%;
}

.search-icon {
	position: absolute;
	left: 107rpx;
	top: 32rpx;
	width: 64rpx;
	height: 64rpx;
}

.h_thred text {
	text-align: center;
	font-size: 46rpx;
	color: white;
	margin-top: -6rpx;
}

.scan-icon {
	width: 70rpx;
	height: 70rpx;
	margin-bottom: 8rpx;
}

/* 滚动容器 */
.scroll-container {
	height: 100vh;
	padding-top: 176rpx;
	padding-bottom: 168rpx;
}

/* 轮播图 */
.banner-section {
	margin-bottom: 20rpx;
}

.swiper-container {
	width: 100%;
	height: 620rpx;
}

.banner-image {
	width: 100%;
	height: 100%;
}

/* 服务分类 */
.life {
	width: 100%;
	background-color: #ffffff;
	padding: 20rpx 0 20rpx;
	display: flex;
	flex-wrap: wrap;
}

.category-item {
	box-sizing: border-box;
	width: 25%;
	padding: 30rpx 0;
	text-align: center;
	color: #212121;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.category-image {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 16rpx;
	border-radius: 20rpx;
}

.category-name {
	font-size: 24rpx;
	color: #333;
	font-weight: 400;
}

/* 商品列表标题 */
.goods_list {
	margin-top: 20rpx;
	padding-left: 60rpx;
	background: #ffffff;
	border-bottom: 1rpx solid #f0f0f0;
}

.sjtitle {
	font-size: 32rpx;
	color: #000;
	height: 88rpx;
	line-height: 88rpx;
	font-weight: 700;
}

/* 商家容器 */
.merchant-container {
	margin-bottom: 210rpx;
}

.empty-state {
	text-align: center;
	padding: 200rpx 0;
	background: #fff;
	margin: 40rpx;
	border-radius: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

/* 商家卡片 */
.big-box {
	margin-bottom: 20rpx;
}

.shangjia-box {
	max-height: 970rpx;
	overflow: hidden;
}

.shangjia {
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	height: 200rpx;
	display: flex;
	padding: 20rpx 0 20rpx;
}

.fl {
	float: left;
}

.clear::after {
	content: "";
	display: table;
	clear: both;
}

.sjwh {
	/* margin-top: 36rpx; */
	margin-left: 30rpx;
	width: 160rpx;
	height: 160rpx;
	padding-top: 20rpx;
}

.merchant-logo {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	border: 1rpx solid #eee;
}

.ml2 {
	margin-left: 30rpx;
	margin-top: 10rpx;
}

.merchant-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 160rpx;
}

.title {
	margin-left: 20rpx;
}

.f32 {
	font-size: 32rpx;
}

.l5 {
	line-height: 50rpx;
}

.mr6 {
	margin-right: 60rpx;
}

.shangjia-title {
	font-weight: 600;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #333;
}

.mt15 {
	margin-top: 8rpx;
}

.star {
	display: flex;
	margin-right: 20rpx;
}

.star-item {
	width: 32rpx;
	height: 32rpx;
	font-size: 28rpx;
	color: #e5e5e5;
	margin-right: 4rpx;
}

.star-item.filled {
	color: #ffd700;
}

.f227 {
	font-size: 22rpx;
	color: #777777;
}

.pr {
	padding-right: 90rpx;
}

.area {
	font-size: 24rpx;
	color: #999;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 商品项 */
.shangjia-goods {
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}

.small-box {
	padding: 30rpx 60rpx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.fenrun {
	padding-top: 16rpx;
	padding-bottom: 30rpx;
}

.goods-name {
	font-size: 30rpx;
	color: #333;
	flex: 1;
	font-weight: 400;
}

.yishou {
	font-size: 24rpx;
	color: #999;
}

.goods-price {
	font-size: 32rpx;
	color: #ff1e00;
	font-weight: 600;
}

.goods-fenru {
	font-size: 24rpx;
	color: #999;
	margin-left: 20rpx;
}

.goods-fenru text {
	color: #ff9600;
}

/* 查看更多 */
.look-more {
	height: 88rpx;
	line-height: 88rpx;
	background-color: #fff;
	font-size: 28rpx;
	color: #ff1e00;
	text-align: center;
	position: relative;
	border-top: 1rpx solid #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.arrow-icon {
	height: 24rpx;
	width: 24rpx;
	margin-left: 12rpx;
}

/* 加载更多 */
.loading-more {
	text-align: center;
	padding: 40rpx 0;
	color: #999;
	font-size: 28rpx;
}

/* 底部导航 */
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 140rpx;
	background: #fff;
	border-top: 2rpx solid #f0f0f0;
	display: flex;
	z-index: 1000;
}

.nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #666;
	position: relative;
}

.nav-item.center {
	position: relative;
}

.nav-icon {
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 8rpx;
}

.center-icon {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 10rpx;
	width: 220rpx;
	height: 120rpx;
}

.nav-text {
	font-size: 24rpx;
	color: #666;
}

.nav-text.active {
	color: #ff1e00;
}

.font12 {
	font-size: 24rpx;
}

/* 占位符样式 */
input::-webkit-input-placeholder {
	color: #a2a2a2;
	opacity: 1;
}

input:-moz-placeholder {
	color: #a2a2a2;
	opacity: 1;
}

input::-moz-placeholder {
	color: #a2a2a2;
	opacity: 1;
}

input:-ms-input-placeholder {
	color: #a2a2a2;
	opacity: 1;
}
</style>